<template>
  <transition  name="el-fade-in">
    <div>
  <div class="whole" id="AlarmCharts">
    <div class="title01" style="height: 75px">
      <div class="titleFont">告警总览</div>
      <el-link type="primary" @click="show();" value="show" class="linktext">查看详情</el-link>
    </div>

    <div class="main">
      <div id="echart1" style="width: 844px;height:400px;float: left;"></div>
      <div id="echart2" style="width: 844px;height:400px;float: right;"></div>
    </div>
  </div>

  <div class="whole" id="AlarmList" style="display:none">
    <div class="title01">
      <div class="titleFont">历史告警</div>
      <el-link type="primary" @click="show();"  class="linktext">返回</el-link>
      <el-row class="input_area">
                <span>
                    <div class="font1">报警级别:</div>
                    <el-select v-model="value" placeholder="请选择">
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                </span>
                <span>
                    <div class="font1" >时间：</div>
                       <el-date-picker
                           v-model="value2"
                           type="daterange"
                           align="right"
                           unlink-panels
                           range-separator="至"
                           start-placeholder="开始日期"
                           end-placeholder="结束日期"
                           :picker-options="pickerOptions">
                       </el-date-picker>
                </span>
        <span class="input_areaButton2">
                    <el-button @click="handleQuery">查询</el-button>
        </span>
      </el-row>
    </div>
    <div class="main">
      <el-button  style="margin-top: 10px;margin-left:20px;text-align: center">批量生成工单</el-button>
      <el-button  style="margin-top: 10px;text-align: center">导出</el-button>
      <div class="table_area">
        <el-table
            ref="multipleTable"
            :data="tableData"
            :header-cell-style="{background: '#ecf8f9', color: '#606266'}"
            tooltip-effect="dark"
            style="width: 100%;"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="alarmName"
              label="报警名称"
              width="200">
          </el-table-column>
          <el-table-column
              prop="alarmDetail"
              label="报警详情"
              width="200">
          </el-table-column>
          <el-table-column
              prop="alarmStaff"
              label="报警联系人"
              width="120">
          </el-table-column>
          <el-table-column
              prop="alarmLevel"
              label="报警级别"
              width="120">
          </el-table-column>
          <el-table-column
              prop="alarmMark"
              label="处理标志"
              width="120">
          </el-table-column>
          <el-table-column
              label="报警时间"
              width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
              prop="action"
              label="操作"
              show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  </div>
  </transition>

</template>

<script>
export default {
  name: 'DeviceHistoryAlarm',
  mounted(){
    // 在通过mounted调用即可
    this.echartsInit()
    },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '普通'
      }, {
        value: '选项2',
        label: '中级'
      }, {
        value: '选项3',
        label: '高级'
      }],
      value: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      tableData: [{
        date: '2016-05-03',
        alarmName: '告警1',
        alarmDetail:'详情',
        alarmStaff:'王工',
        alarmLevel:'中级',
        alarmMark:'进行中',
        action:'派发工单'
      }, {
        date: '2016-05-02',
        alarmName: '告警1',
        alarmDetail:'详情',
        alarmStaff:'王工',
        alarmLevel:'中级',
        alarmMark:'进行中',
        action:'派发工单'
      }, {
        date: '2016-05-04',
        alarmName: '告警1',
        alarmDetail:'详情',
        alarmStaff:'王工',
        alarmLevel:'中级',
        alarmMark:'进行中',
        action:'派发工单'
      }, {
        date: '2016-05-01',
        alarmName: '告警1',
        alarmDetail:'详情',
        alarmStaff:'王工',
        alarmLevel:'中级',
        alarmMark:'进行中',
        action:'派发工单'
      }, {
        date: '2016-05-08',
        alarmName: '告警1',
        alarmDetail:'详情',
        alarmStaff:'王工',
        alarmLevel:'中级',
        alarmMark:'进行中',
        action:'派发工单'
      }, {
        date: '2016-05-06',
        alarmName: '告警1',
        alarmDetail:'详情',
        alarmStaff:'王工',
        alarmLevel:'中级',
        alarmMark:'进行中',
        action:'派发工单'
      }, {
        date: '2016-05-07',
        alarmName: '告警1',
        alarmDetail:'详情',
        alarmStaff:'王工',
        alarmLevel:'中级',
        alarmMark:'进行中',
        action:'派发工单'
      }],
      multipleSelection: []
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    show(){
      var alarmCharts=document.getElementById("AlarmCharts");
      var alarmList=document.getElementById("AlarmList");
      if(alarmCharts.value==="show")
      {
        alarmCharts.value="hide";
        alarmCharts.style.display="block";
        alarmList.style.display="none";
      }
      else
      {
        alarmCharts.value="show";
        alarmList.style.display="block";
        alarmCharts.style.display="none";
      }
    },
    echartsInit() {
      //柱形图
      //因为初始化echarts 的时候，需要指定的容器 id='echart1'
      this.$echarts.init(document.getElementById('echart1')).setOption({
            title: {
              // text: '圆环图的例子',
              // left: 'center',
              // top: 'center'
            },
            series: [
              {
                type: 'pie',
                data: [
                  {
                    value: 335,
                    name: '告警类型1'
                  },
                  {
                    value: 234,
                    name: '告警类型2'
                  },
                  {
                    value: 1548,
                    name: '告警类型3'
                  }
                ],
                radius: ['40%', '90%']
              }
            ]
      }
      )
      this.$echarts.init(document.getElementById('echart2')).setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      });
    }
  }
}
</script>

<style scoped lang="css" src="../assets/DeviceHistoryAlarm/index.css" />